<template>
	<om-page :title="pageTitle" class="om-font-size">
		<view class="margin-top-xs">
			<view class="save">
				<view style="flex: 1;">
					<span class="fl">(上下拖动分组名称右侧图标进行排序)</span>
					<a class="om-btn fr" @click="save">保存</a>
				</view>
			</view>
			<view class="content" style="margin-top: 52px;">
				<!-- 当前属性设置 isLongTouch关闭长按拖动 isAutoScroll开启自动滚动 feedbackGeneratorState开启触感反馈 rowHeight行高55 -->
				<ot-HM-dragSorts :list="groupList" :isLongTouch="false" :isAutoScroll="true" :feedbackGeneratorState="true"  :rowHeight="55" @change="change" @confirm="confirm" @onclick="onclick" >
					<template slot="rowContent" slot-scope="{ row }">
						<view class="row">
							<text class="text">{{row.groupName}}</text>
						</view>
					</template>
				</ot-HM-dragSorts>
			</view>
		</view>
	</om-page>
</template>

<script>
	export default {
		data() {
			return {
				pageTitle: '分组菜单排序',
				groupList: [],
				groupSort: [],
			};
		},
		methods: {
			onclick(e){
				// console.log('=== 点击行 ===');
				// console.log("被点击行: " + JSON.stringify(e.value));
				// console.log("被点击下标: " + JSON.stringify(e.index));
			},
			change(e){
				// console.log('=== 移动中 ===');
				// console.log("被拖动行: " + JSON.stringify(e.moveRow));
				// console.log('原始下标：',e.index);
				// console.log('移动到：',e.moveTo);
			},
			confirm(e){
				// console.log('=== 移动结束后 ===');
				// console.log("被拖动行: " + JSON.stringify(e.moveRow));
				// console.log('原始下标：',e.index);
				// console.log('移动到：',e.moveTo);
				let data1 = this.groupSort[e.index]
				let data2 = this.groupSort[e.moveTo]
				this.groupSort[e.index] = data2
				this.groupSort[e.moveTo] = data1
			},
			save(){
				let _that = this
				_that.om.request('wxNewGroupMenu/saveGroupSort',{
					groupIds: _that.groupSort.join(",")
				},'post').then(res => {
					if (res.succeed) {
						uni.navigateBack()
					}else{
						_that.om.toast(res.msg);
					}
				});
			},
			getGroupList(){
				let _that = this
				_that.om.request('wxNewGroupMenu/getAllGroupList').then(res => {
					if (res.succeed) {
						_that.groupList = res.value.filter(item => item.isdefault !== true)
						_that.groupSort = _that.groupList.map(e=>e.id)
					}
				});
			},
		},
		onLoad() {
			this.getGroupList()
		},
	};
</script>

<style lang="scss" scoped>
	.save{
		position: fixed;
		top: 0;
		display: flex;
		z-index: 99;
		width: 100%;
		padding: 5px 3px;
		border-bottom: 1px solid #c8c7cc;
		background: #FFF;
		span{
			margin-left: 12px;
			font-size: 14px;
			line-height: 42px;
		}
	}
	.content {
		.row{
			display: flex;
			flex-direction: row;
			align-items: center;
			.icon{
				width: 30px;
				height: 30px;
				border-radius: 6px;
				margin-right: 13px;
			}
			.text{
				font-size: 13px;
			}
		}
	}
</style>
